import {PropType} from 'vue'
import ParamStandRange from '@/components/input/paramStandRange'

const DeviceInfoInput = defineComponent({
  name: 'DeviceInfoInput',
  props: {
    value: {
      type: String,
      default: '',
    },
    inputType: {
      type: String as PropType<'paramRange'>,
      default: null,
    },
    label: {
      type: String,
      default: '',
    },
    devId: {
      type: Number,
      default: 0,
    },
    isDelete: {
      type: Boolean,
      default: true,
    },
    isEdit: {
      type: Boolean,
      default: true,
    },
  },
  emits: ['confirm', 'cancel', 'delete'],
  setup: (props, {emit}) => {
    let inputValue = ref<string | number | null>(null)
    let showInput = ref(false)

    /**修改按钮点击 */
    const handle_msg_edit_btn_click = () => {
      showInput.value = true
      inputValue.value = props.value
    }
    /**点击取消按钮 */
    const handle_msg_cancel_btn_click = () => {
      showInput.value = false
      inputValue.value = null
    }
    /**点击确认按钮 */
    const handle_msg_confirm_btn_click = () => {
      emit('confirm', inputValue.value)
      handle_msg_cancel_btn_click()
    }
    /**点击删除按钮 */
    const handle_msg_delete_btn_click = () => {
      emit('delete')
    }
    return () => (
      <div class="flex justify-start items-center flex-nowrap my-1">
        <div class="flex-1 flex justify-start items-center mx-2">
          <span class="whitespace-nowrap">{props.label}：</span>
          <span class={[showInput.value ? 'hidden' : '']}>{props.value}</span>
          {!Boolean(props.inputType) ? (
            <a-input
              v-models={[[inputValue.value, 'value']]}
              class={[showInput.value ? '' : 'hidden']}
              size="mini"
            >
              {props.value}
            </a-input>
          ) : null}
          {props.inputType === 'paramRange' ? (
            <ParamStandRange
              class={[showInput.value ? '' : 'hidden']}
              defaultRange={props.value}
              onChange={value => {
                inputValue.value = value
              }}
            ></ParamStandRange>
          ) : null}
        </div>
        {props.isEdit ? (
          <i
            class={[
              'iconfont icon-xiugai text-primary cursor-pointer flex-1 flex justify-end',
              showInput.value ? 'hidden' : '',
            ]}
            onClick={() => handle_msg_edit_btn_click()}
          ></i>
        ) : null}
        <div class={[showInput.value ? '' : 'hidden', ' flex justify-end']}>
          <a-button
            class="mx-1"
            type="primary"
            onClick={handle_msg_confirm_btn_click}
          >
            确认
          </a-button>
          <a-button
            class="mx-1"
            type="info"
            onClick={handle_msg_cancel_btn_click}
          >
            取消
          </a-button>
          {props.isDelete ? (
            <a-popconfirm
              title={`确认删除 - ${props.label}?`}
              ok-text="取消"
              cancel-text="确认删除"
              onCancel={handle_msg_delete_btn_click}
            >
              <a-button class="mx-1" type="danger">
                删除
              </a-button>
            </a-popconfirm>
          ) : null}
        </div>
      </div>
    )
  },
})

export default DeviceInfoInput
